<template>
  <section id="section-news" class="d-flex flex-column align-items-center">
    <SectionTitle title="新闻动态" sub-title="News Center" />
    <div class="news-list">
      <b-container fluid>
        <b-row>
          <b-col v-for="news in newsList" :key="news.id" md="6">
            <NewsItem
              :title="news.title"
              :content="news.summary"
              date="2018-10-19"
              :img-src="`${imgDomain}${news.cover_image}`"
            />
          </b-col>
          <!-- <b-col md="6">
            <NewsItem
              title="阿里巴巴入股星普魁牛13%股权"
              content="阿里巴巴入股星普魁牛13%blablabla111111111111111111"
              date="2018-10-19"
              img-src="/images/m/news-1.jpg"
            />
          </b-col>
          <b-col md="6">
            <NewsItem
              title="阿里巴巴入股星普魁牛13%股权"
              content="阿里巴巴入股星普魁牛13%blablabla111111111111111111"
              date="2018-10-19"
              img-src="/images/m/news-1.jpg"
            />
          </b-col>
          <b-col md="6" class="d-none d-md-block">
            <NewsItem
              title="阿里巴巴入股星普魁牛13%股权"
              content="阿里巴巴入股星普魁牛13%blablabla111111111111111111"
              date="2018-10-19"
              img-src="/images/m/news-1.jpg"
            />
          </b-col> -->
        </b-row>
      </b-container>
      <b-button pill variant="outline-secondary" @click="onMoreBtnClicked">
        更多
      </b-button>
    </div>
  </section>
</template>

<script>
import SectionTitle from '@/components/m/SectionTitle';
import NewsItem from '@/components/m/NewsItem';

export default {
  components: {
    SectionTitle,
    NewsItem,
  },
  props: {
    newsList: {
      type: Array,
      required: true,
    },
    imgDomain: {
      type: String,
      default: '',
    },
  },
  methods: {
    onMoreBtnClicked() {
      this.$router.push('/news');
    },
  },
};
</script>

<style lang="scss" scoped>
#section-news {
  background-color: #f3f3f3;
  padding: 30px 20px;

  .news-list {
    max-width: 991px;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 30px;
    .card {
      margin-bottom: 20px;
    }
    button {
      color: #9b9b9b;
      letter-spacing: 0.58px;
      background-color: #fff;
      width: 100px;
    }
  }
}
</style>
